<template>
  <div class="index">
    <el-container>
      <el-aside width="200px">
        <div class="aside-title">
          <i class="el-icon-s-custom"></i>
          <span>考勤管理</span>
          <i class="el-icon-more"></i>
          <i class="el-icon-circle-plus"></i>
        </div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          active-text-color="orange"
          router
        >
          <el-menu-item index="/index/business">
            <i class="el-icon-tickets"></i>
            <span slot="title">出差申请</span>
          </el-menu-item>

          <el-menu-item index="/index/outside" v-if="$store.state.userinfo&&$store.state.userinfo.role.permissions.includes(12)">
            <i class="el-icon-tickets"></i>
            <span slot="title">外勤打卡</span >
          </el-menu-item>

          <el-menu-item index="/index/leave" v-if="$store.state.userinfo&&$store.state.userinfo.role.permissions.includes(13)">
            <i class="el-icon-tickets"></i>
            <span slot="title">请假申请</span>
          </el-menu-item>

          <el-menu-item index="/index/work" v-if="$store.state.userinfo&&$store.state.userinfo.role.permissions.includes(14)">
            <i class="el-icon-tickets"></i>
            <span slot="title">加班申请</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <keep-alive>
          <router-view />
        </keep-alive>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  
};
</script>

<style lang='scss' scoped>
.index {
  height: 100%;
  .el-container {
    height: 100%;
    .el-header {
      background-color: #b3c0d1;
      color: #333;
      line-height: 60px;
    }

    .el-aside {
      color: #333;
      border-right: solid 1px #e6e6e6;
      .aside-title{
        line-height: 80px;
        padding-left: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        .el-icon-s-custom{
          font-size: 26px;
          color: orange;
          margin-right: 10px;
        }
        span{
          margin-right: 30px;
        }
        .el-icon-more{
          margin-right: 10px;
        }
        .el-icon-circle-plus{
          font-size: 20px;
          color: orange;
        }
      }
      .el-menu{
        border: 0;
      }
      .is-active{
        background-color:#fcebdc,
      }
    }
    .el-main{
      padding: 0;
    }
  }
}
</style>